// src/components/ToolKit/DBConnShow.tsx
import React from "react";
import { Row, Col, Card, Alert, Popover, Button } from "antd";
import { DatabaseOutlined, MinusOutlined } from "@ant-design/icons";
import { useStore } from '../../stores';
import { observer } from "mobx-react-lite";
import * as styles from '../../assets/styles/toolkit/environment.module';

const DBConnShow: React.FC = observer(() => {
  const store = useStore();
  const dbCards = store.toolkit.dbCards;
  const connectedDbs = store.toolkit.connectedDbCards;
  
  // 删除已连接的数据库卡片
  const handleRemoveConnectedDb = (id: number) => {
    store.toolkit.removeConnectedDbFromShow(id);
    
    // 如果删除后没有数据库卡片了，则添加一个新的
    if (store.toolkit.dbCards.length === 0) {
      const newCard = {
        id: Date.now(),
        name: '自定义数据库名称',
        config: {
          host: "",
          port: "",
          database: "",
          username: "",
          password: ""
        },
        isConnected: false
      };
      store.toolkit.addDbCard(newCard);
    }
  };
  
  return (
    <div>
      {/* 已连接的数据库 */}
      <Row gutter={24} style={{ marginBottom: 24 }}>
        <Col span={24}>
          <Card 
            title={
              <span>
                <DatabaseOutlined style={{ marginRight: 8 }} />
                已连接的数据库
              </span>
            }
          >

            <Alert
            message="数据库连接状态"
            description={
              <div>
                {connectedDbs.length === 0? (
                  <span>
                    暂未有已连接成功的数据库。
                  </span>
                ) : (
                  <div>
                    <div>✓ 数据库链接已就绪</div>
                  </div>
                )}
              </div>
            }
            type={connectedDbs.length === 0 ? "warning" : "success"}
            showIcon
          />
            <div>
              {connectedDbs.length === 0 ? (
                // <span style={{ display: 'flex', justifyContent: 'center'}}>暂无已连接成功的数据库</span>
                <></>
              ) : (
                <Row gutter={24}>
                  {connectedDbs.map(db => (
                    <Col span={12} key={db.id}>
                      <Popover 
                        content={
                          <div>
                            <p><strong>主机地址:</strong> {db.config.host}</p>
                            <p><strong>端口:</strong> {db.config.port}</p>
                            <p><strong>数据库名:</strong> {db.config.database}</p>
                            <p><strong>用户名:</strong> {db.config.username}</p>
                          </div>
                        } 
                        title="数据库信息"
                      >
                        <div 
                          // 修复: 为 styles.tableItem 提供必要的参数
                          className={styles.tableItem(false)}
                          style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', position: 'relative' }}
                          onMouseEnter={() => store.toolkit.setHoveredDbId(db.id)}
                          onMouseLeave={() => store.toolkit.setHoveredDbId(null)}
                        >
                          <div>
                            <div className={styles.tableItemName}>
                              {db.name}
                            </div>
                            <div className={styles.tableItemDescription}>
                              {db.config.database}
                            </div>
                          </div>
                          {store.toolkit.hoveredDbId === db.id && (
                            <Button
                              type="primary"
                              icon={<MinusOutlined />}
                              size="small"
                              style={{
                                position: 'absolute',
                                right: 8,
                                top: '50%',
                                transform: 'translateY(-50%)',
                                width: 24,
                                height: 24,
                                minWidth: 24,
                                padding: 0
                              }}
                              onClick={(e) => {
                                e.stopPropagation();
                                handleRemoveConnectedDb(db.id);
                              }}
                            />
                          )}
                        </div>
                      </Popover>
                    </Col>
                  ))}
                </Row>
              )}
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
});

export default DBConnShow;